<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name=”renderer” content="ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Title</title>
    <link rel="stylesheet" href="../js/utils/bootstrap/css/bootstrap.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            /*background-color: lightpink;*/

            /*opacity: .5;*/

        }
        body a:hover{
            text-decoration: none;
        }
        .nav-wrapper{
            width: 100%;
            height: 40px;
            min-width: 800px;
            line-height: 40px;
            background-color: #003b5c;
            display: flex;

            justify-content:center;
            align-items: center;

        }
        .nav-box{
            margin: 0 auto;
            display: flex;
            min-width: 800px;
            justify-content: space-between;
        }
        .navItem{
            color:#8f99a3;
            margin: 0 20px;
        }
        .search{

        }
        .nav-wrapper>.nav-box>.navItem>.input-group>.form-control{
            color:#fff!important;;
            margin-top: 2px!important;
            background-color:#003b5c!important;
            border-radius: 25px!important;
            padding: 6px 20px;
            width: 250px!important;
        }
        .nav-wrapper>.nav-box>.navItem>.input-group>.input-group-btn>.btn-info{
            background-color:#003b5c!important;
            border: 0px;
            position: absolute;
            left:-50px;
            top:10px;
            z-index: 9999;
        }
        /*主体*/


        .login-wrapper{
            /*width: 100%;*/
            /*height: 100vh;*/
            /*filter: blur(3px) ;*/
            /**/
     /*       -moz-background-size: contain;
            background-position: center;
            background-repeat:no-repeat ;
            position : absolute;*/
        }
        .login-wrapperArea{
            position: absolute;
            z-index: 9999;
            width: 480px;
            height: 460px;
            padding: 50px;
            right: 100px;
            bottom: 30%;
            background-color:rgba(255,255,255,.3);
            /*opacity: .8;*/
            box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.06);
            display: flex;
            flex-direction: column;
            justify-content: space-between;

        }
        login-wrapperArea>div>div a{
            text-decoration: none;
        }

        .input-group-addon{
            border: 0px !important;
            background-color: #fff !important;
            color: #999999 !important;
            font-size: 16px !important;
        }
        .input-group{
            /*font-size: 16px !important;*/
        }
        .input-group > .form-control{
            border: 0px  !important;

        }
        /*去除bootstrap点击按钮的边框*/
        .btn:focus{
            outline: none !important;
        }

        .loginBtn{
            background-color: #95d4ea;
            height: 30px;
            width: 100px;
            font-size: 16px;
            line-height: 30px;
            padding: 0px 10px;
            border-radius: 5px;
            display: block;
            text-align: center;
        }
        .regBtn{
            background-color: #EC7B6D;
            height: 30px;
            width: 100px;
            font-size: 16px;
            line-height: 30px;
            padding: 0px 10px;
            border-radius: 5px;
            display: block;
            text-align: center;
        }
        /*--------------*/
        .footer{
            width: 100%;
            height: 40px;
            background-color: black;
            display: flex;
            color: #999999;
            align-items: center;
            justify-content: center;
            position: fixed;
            bottom: 0;
        }

    </style>
</head>
<script src="../js/utils/jQuery/index.js"></script>

<script src="../js/utils/bootstrap/js/bootstrap.min.js"></script>
<body>
<div style="position:relative;
            word-break: break-all;
            overflow: auto;
            height: 100vh;
            width: 100%;
            min-width: 1000px;
            background-image: url(../assets/bg.jpeg) ;
            background-size: cover;
            background-repeat: no-repeat;">
    <div class="nav-wrapper" >
        <div class="nav-box" >
            <div class="navItem"><img style="width: 50px;height:25px; " src="../assets/suss_logo_write.png" alt=""></div>
            <div class="navItem">ALL COURSES</div>
            <!--  <div class="navItem">
                  <input type="text" class="btn-search form-control" placeholder="Search">
              </div>-->
            <div class="navItem">
                <div class="input-group"  style="margin-top: 3px;">
                    <input type="text" class="form-control"placeholder="请输入字段名" />
                    <span class="input-group-btn">
                            <button type="submit" class="btn btn-info btn-search glyphicon glyphicon-search" style="margin-top: -7px;"></button>
                        </span>
                </div>
            </div>



            <div class="navItem">About US</div>
            <div class="navItem" style="display: flex;">
                <div style="display: flex;align-items: center;"><a href="02登录.html" class="loginBtn">Login</a></div>
                <div style="display: flex;align-items: center; margin-left: 5px;"><a href="03注册.html" class="regBtn">Register</a></div>
            </div>
        </div>
    </div>


    <div class="login-wrapper">
            <form role="form" class="login-wrapperArea">

                <div style="display: flex;justify-content: space-between">
                    <a href="Javascript:" style="font-size: 20px;font-weight: bold;color: black" id="SignIn">Sign In</a>
                    <a href="03注册.html" style="font-size: 17px;font-weight: 500;color:#003b5c" id="SignUp">Sign Up</a>
                </div>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">Email:</span>
                    <input type="email" class="form-control" placeholder="Email" aria-describedby="basic-addon1">
                </div>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon2">PassWord:</span>
                    <input type="password" class="form-control" placeholder="Password" aria-describedby="basic-addon2">
                </div>

                <div class="input-group" style="display: flex;justify-content: space-between;">
                    <input type="text" style="width: 260px;border-radius: 3px !important;" class="form-control " placeholder="CaptCha" aria-describedby="basic-addon3">
                    <div style="display: flex;flex-direction: column;">
                        <button  class="btn btn-default">CaptCha</button>
                        <span style="margin-top: 10px;color: #003b5c;font-weight: bold;cursor:pointer;">Forget Password</span>
                    </div>
                </div>

                <!-- <div class="input-group" style="display: flex;justify-content: center">
                     <div class="input-group" style="display: flex;justify-content: flex-end;">

                     </div>
                 </div>-->
                <div class="input-group" style="display: flex;justify-content: center">
                    <button   style="width: 180px;background-color:#95d4ea;color: #fff;font-size: 18px;" class="btn btn-default">Sign In</button>
                </div>
                <div class="input-group" style="display: flex;justify-content: center;">
                    <button style="width: 180px;background-color:#95d4ea;font-size: 18px;"  class="btn btn-default">Sign Up</button>
                </div>

            </form>
    </div>



    <div class="footer">
        Copyright @ 2021 Singapore University of Social Sciences.All rights reserved.
    </div>
</div>








<script>

</script>
</body>
</html>